<template>
  <div>
    <keep-alive>
      <div class="header">
        <div class="title"> 
          分布式考试系统
          
        </div>
        <!-- <h1 style="text-align: center">分布式考试系统</h1> -->
        <div class="systemtitle">
          <!-- <img src="/static/image/logo.jpg"  alt="" /> -->
        </div>

        <ul class="head-nav">
          <router-link
            :to="items.path"
            tag="li"
            @click.native="selectMenu(items)"
            v-for="(items, index) in menuList"
            :class="
              defaultSelectPage === items.id
                ? 'activeitem active'
                : 'activeitem'
            "
            :key="index"
          >
            {{ items.label }}
            <!-- <ul class="itemli" v-if="items.isT">
              <router-link :to="item.path" tag="li" @click.native="selectMneu()" v-for="(item,inx) in items.children" :key="inx">{{item.label}}</router-link>
            </ul>-->
          </router-link>
        </ul>

        <el-dropdown style="right: 13%">
          <!-- <el-badge v-if="unReadMessageNumber > 0" :value="unReadMessageNumber" class="item">
            <span  style="font-size: 16px" class="el-icon-message">消息</span>
          </el-badge>

          <el-badge v-else class="item">
            <span  class="el-icon-message">消息</span>
          </el-badge> -->

          <el-dropdown-menu>
            <el-dropdown-item @click.native="goMessageView()">
              <el-badge
                v-if="unReadMessageNumber > 0"
                :value="unReadMessageNumber"
                class="item"
              >
                <span>通知</span>
              </el-badge>

              <el-badge v-else class="item">
                <span>通知</span>
              </el-badge>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown>
          <span class="el-dropdown-link">
            <!-- <img v-if="!userInfo.headImg" src="@/assets/img/userImg.png">
              <img v-else :src="fileHost + userInfo.headImg"> -->
            {{ userInfo.name }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!--<el-dropdown-item>个人资料</el-dropdown-item>-->
            <!--  <el-dropdown-item>
              <el-badge :value="unReadMessageNumber" class="item">
                <span>消息通知</span>
              </el-badge>
            </el-dropdown-item>-->
            <!--<el-dropdown-item @click.native="beforeUpdatePassword()">修改密码</el-dropdown-item>-->
            <el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
          </el-dropdown-menu>

          <el-dialog
            append-to-body
            title="修改密码"
            :visible.sync="dialogFormVisible"
          >
            <el-form :model="form">
              <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input
                  v-model="userInfo.name"
                  :disabled="true"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input
                  v-model="form.newPassword"
                  autocomplete="off"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" :label-width="formLabelWidth">
                <el-input
                  v-model="form.confirmPassword"
                  autocomplete="off"
                  show-password
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-dropdown>
      </div>
    </keep-alive>
  </div>
</template>

<script>
import { clearLoginInfo } from "@/api/common";
import { mapGetters } from "vuex";
export default {
  name: "header-common",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      fileHost: this.$store.state.common.fileHost,
      form: {
        newPassword: "",
        confirmPassword: "",
      },
      unReadMessageNumber: 0,
      formLabelWidth: "120px",
      defaultSelectPage: null,
      menuList: [
        // {label:'首页', id: 1, active:'', isT: false, path: '/home'},
        //  {label:'考试中心', id: 3, active:'', isT: false, path: '/exam'},
        // {label:'考试记录', id: 4, active:'', isT: false, path: '/examHistory'},
        // // {label:'我的错题本', id: 5, active:'', isT: false, path: '/wrongBook'},
        // {label:'个人中心', id: 6, active:'', isT: false, path: '/account/userInfo'},
      ],

      webSocket: null,
    };
  },

  watch: {
    $route() {
      // 获取当前路径
      let path = this.$route.path;

      // 检索当前路径
      this.parserPath(path);
    },
  },

  computed: {
    ...mapGetters({
      userInfo: "user/getUserInfo",
    }),
  },

  mounted() {
    let select = sessionStorage.getItem("select_menu_index");
    if (select) {
      this.defaultSelectPage = parseInt(select);
    } else {
      this.defaultSelectPage = 1;
    }

    this.initWebSocket();

    this.getUnReadMessageNumber();
  },

  methods: {
    selectMenu(menu) {
      this.defaultSelectPage = menu.id;
      sessionStorage.setItem("select_menu_index", this.defaultSelectPage);
    },

    getUnReadMessageNumber() {
      this.axios
        .get(this.$httpApi.httpUrl("/student/message/getUnReadMessageCount"))
        .then((response) => {
          this.unReadMessageNumber = response.data.data;
        });
    },

    goMessageView() {
      this.unReadMessageNumber = 0;
      this.$router.push({ name: "message" });
    },

    parserPath(path) {
      let menu = {};
      if (path.indexOf("examHistory") !== -1) {
        menu.id = 4;
      } else if (path.indexOf("account") !== -1) {
        menu.id = 6;
      }
      if (menu.id) {
        this.selectMenu(menu);
      }
    },

    beforeUpdatePassword() {
      let that = this;
      that.dialogFormVisible = true;
    },

    logoutCommon(that) {
      that.axios
        .post(that.$httpApi.httpUrl("/student/logout"))
        .then(function (response) {
          if (response.data.code === 1) {
            that.$message({
              type: "success",
              message: response.data.message,
            });
            clearLoginInfo();
            setTimeout(function () {
              that.$router.push({ name: "login" });
            }, 1000);
          } else {
            that.$message({
              type: "error",
              message: response.data.message,
            });
          }
        });
    },

    initWebSocket() {
      let that = this;
      if ("WebSocket" in window) {
        let isHttps = "https:" == document.location.protocol ? true : false;
        /* let hostName = location.hostname
          let port = location.port
          if (port && parseInt(port) != 80) {
            hostName += ":" + port
          } */
        let hostName = this.$store.state.common.webSocketHost;
        if (isHttps) {
          // https 需要使用 wss:// 方式 连接
          that.webSocket = new WebSocket("wss://" + hostName + "/webSocket");
        } else {
          that.webSocket = new WebSocket("ws://" + hostName + "/webSocket");
        }
        that.webSocket.onopen = that.onOpen;
        that.webSocket.onmessage = that.onMessage;
        that.webSocket.onclose = that.onClose;
      }
    },

    onOpen() {
      // console.log("webSocket连接成功");
    },

    //接收消息
    onMessage(event) {
      //数据接收
      let that = this;
      let data = JSON.parse(event.data);
      let messageType = data.message_type;
      if (messageType === 1) {
        this.$message({
          type: "error",
          message: data.content,
        });
        setTimeout(function () {
          that.$router.push("login");
        }, 5000);
      } else if (messageType === 2) {
        this.unReadMessageNumber++;
      }
    },

    onClose(event) {
      //关闭
      console.log("webSocket关闭成功");
    },

    // 退出
    logout() {
      let that = this;
      that
        .$confirm("确定退出系统吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that.logoutCommon(that);
        });
    },
  },
};
</script>
<style lang="less" scoped>
// .el-dropdown-link {
//   width: 50px;
//   cursor: pointer;
//   img {
//     width: 32px;
//     height: 32px;
//     display: inline-block;
    
//   }
// }
.header {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  .el-dropdown {
    position: absolute;
    right: 0;
    top: 35px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    .cp {
      font-size: 36px;
      color: #009cde;
      padding-right: 5px;
      vertical-align: middle;
    }
  }
  .title {
    color: #409eff;
    font-weight: 800;
    font-size: 30px;
    margin-bottom: 25px;
    text-align: center;
  }
  .systemtitle {
    text-align: center;
    width: 200px;
    height: 90%;
    padding-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
      // vertical-align: middle;
    }
  }
  .head-nav {
    position: absolute;
    right: 300px;
    top: 30px;
    display: flex;
    border: 1px solid #52565a;
    border-radius: 16px;
    overflow: visible;
    .activeitem {
      padding: 15px;
      font-size: 16px;
      color: rgb(0, 0, 0);
      position: relative;
      &:first-child {
        border-radius: 16px 0 0 16px;
      }
      &:last-child {
        border-radius: 0 16px 16px 0;
      }
      .itemli {
        width: 94px;
        position: absolute;
        left: 0;
        top: 51px;
        z-index: 111;
        display: none;
        li {
          width: 100%;
          padding: 15px;
          color: rgb(0, 0, 0);
        }
        li:hover {
          color: #52565a;
        }
      }
    }
    .active {
      background-color: #52565a;
      color: #fff;
    }
    .activeitem:hover {
      background-color: #52565a;
      color: #fff;
      cursor: pointer;
      .itemli {
        display: block;
        background-color: #fff;
        border-radius: 0 0 6px 6px;
      }
    }
  }
}
</style>

